import { 
  Card, 
  Button, 
  Tag, 
  Alert,
  Table,
  Space,
  Tooltip,
} from 'antd'
import Mermaid from '@/components/Mermaid' // 根据您的路径调整
import { ReactNode } from 'react'

interface CodeChild {
  type?: string
  props: {
    className?: string
    children?: string
  }
}

function CustomPre({ children, ...props }: { children?: ReactNode & CodeChild }) {
  if (children?.type === 'code') {
    const codeProps = children.props
    const language = codeProps?.className?.replace('language-', '')
    const codeContent = codeProps?.children
    
    if (language === 'mermaid' && typeof codeContent === 'string') {
      return <Mermaid chart={codeContent} />
    }
  }
  return <pre {...props}>{children}</pre>
}

// 直接导出组件对象
export const mdxComponents = {
  Card,
  Button, 
  Tag,
  Alert,
  Table,
  Space,
  Tooltip,
  pre: CustomPre, // 覆盖默认的 pre 组件
}